<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0px;
            text-align: center;
        }

        table td,
        table th {
            border: 1px solid #ccc;
            height: 30px;
        }

        .active {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div id="output">
        <table>
            <tbody>
                <!-- <tr>
                    <th><input type="checkbox"></th>
                    <th>#</th>
                    <th>姓名</th>
                    <th>昵称</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script>
        let table = document.querySelector('table');

        let dates = [
            {
                "name": "刘备",
                "nickname": "小刘",
                "age": 58,
                "gender": "男",
                "hobby": ["撩妹", "装逼", "编草鞋"]
            },
            {
                "name": "关羽",
                "nickname": "关二",
                "age": 47,
                "gender": "男",
                "hobby": ["耍大刀", "变脸", "喝酒"]
            },
            {
                "name": "张飞",
                "nickname": "张三",
                "age": 45,
                "gender": "男",
                "hobby": ["打架", "喝酒", "耍流氓"]
            },
            {
                "name": "赵云",
                "nickname": "赵四",
                "age": 22,
                "gender": "男",
                "hobby": ["打架", "喝酒", "耍帅"]
            },
            {
                "name": "貂蝉",
                "nickname": "美女",
                "age": 20,
                "gender": "女",
                "hobby": ["撩汉", "化妆"]
            },
            {
                "name": "小乔",
                "nickname": "乔二",
                "age": 18,
                "gender": "女",
                "hobby": ["弹琴", "唱歌", "撩周瑜"]
            }
        ]
        show(dates);
        function show(dates) {
            table.innerHTML = `<tr>
                                    <th><input type="checkbox" id="all"></th>
                                    <th>#</th>
                                    <th>姓名</th>
                                    <th>昵称</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>爱好</th>
                                    <th>操作</th>
                                </tr>`;
            table.innerHTML += dates.map((item, index) => {
                return `<tr id="${index}">
                            <td><input type="checkbox" class="check"></td>
                            <td>${index + 1}</td>
                            <td>${item.name}</td>
                            <td>${item.nickname}</td>
                            <td>${item.age}</td>
                            <td>${item.gender}</td>
                            <td>${item.hobby}</td>
                            <td class="del" style="cursor: pointer;">X</td>
                        </tr>`;
            }).join('');
        }


        table.onclick = e => {
            let dels = document.querySelectorAll('.del');
            if (e.target.className == "del") {
                dates.splice(e.target.parentNode.id, 1);
                show(dates);
            }
        }

        //全选框
        let all = document.getElementById('all');
        let checks = [...document.querySelectorAll('.check')];
        all.onclick = function () {
            for (let i = 0; i < checks.length; i++) checks[i].checked = this.checked;
        }

        for (let i = 0; i < checks.length; i++) {
            checks[i].onclick = () => {
                let res = checks.every(item => item["checked"])
                all.checked = res ? res : false;
            }
        }
    </script>
</body>

</html>